<template>
  <div class="gpm-root">
    <asset-list :mapView="mapView" ref="asset-list-ref" @nodeClick="nodeClick" class="asset-list"></asset-list>
    <el-collapse-transition>
      <shelve-list @queryRegion="queryRegion" @expertDetail="expertDetail" ref="shelve-list-ref" :view-type="listViewType" @addBtn="addNodeBtn"
                   :parent-id="currentAssetId"
                   v-if="listCardVisible"
                   @closeSelfAction="()=>{listCardVisible = false}"
                   class="shelve-list"></shelve-list>
    </el-collapse-transition>
    <right-drawer :view-type="rightDrawerViewType" v-if="rightDrawerViewType!=null" :expert-id="currentExpertId" class="right-drawer"></right-drawer>
    <search @search="searchAction" class="gpm-search"></search>
    <lark-map @loaded="mapLoaded" style="position: absolute" ref="gpm-map" :map-config="bufferMapConfig"></lark-map>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, nextTick } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import assetList from './assetList/index'
  import shelveList from './shelveList/index'
  import rightDrawer from './rightDrawer'
  import search from './search'
  import mapConfig from '../../../../datas/gpmMapConfig.json'
  import {
    getGraphicList,
    addGraphicLayer,
    getGraphic,
    getMapViewState,
    setMapViewState,
    getGraphicByGeometry,
    queryGraphicByAttribute,
    queryResultsByUrls,
    highlightByGeometryList,
    getGeometryListByQueryResult,
    getTabsDataByQueryResult,
    getOnlyResByQueryResult,
    removeHighlight,
    queryByGeometry,
    openPopup
  } from 'lark-map'

  export default {
    name: 'gpm',
    props: {},
    components: {
      search,
      rightDrawer,
      shelveList,
      assetList
    },
    setup(props, content) {

      let {} = props

      const data = reactive({
        rightDrawerViewType: null,
        bufferMapConfig: mapConfig,
        listCardVisible: false,
        currentAssetId: null,
        listViewType: null,
        mapView: null,
        currentExpertId: null //当前展示专家id
      })

      const queryRegion = (row) => {
        loadPlantDistribute({ NAME: row.name })
      }

      const loadPlantDistribute = async(conditions) => {
        data.loading = true
        try {
          const { mapView: view } = data
          let { NAME } = conditions
          let requestParams = {
            view,
            idList: [],
            outFields: [],
            where: [],
            returnGeometry: [],
            subLayerIds: []
          }
          if (NAME) {
            requestParams.idList.push('PlantSuitableRegionService')
            requestParams.outFields.push({ parentId: 'PlantSuitableRegionService', value: ['*'] })
            requestParams.where.push({ parentId: 'PlantSuitableRegionService', value: `1=1 and NAME like  '%${NAME}%'` })
            requestParams.returnGeometry.push({ parentId: 'PlantSuitableRegionService', value: true })
            requestParams.subLayerIds.push({ parentId: 'PlantSuitableRegionService', value: [0] })
          }
          if (requestParams.idList == []) {
            return
          }
          let res = await queryResultsByUrls(requestParams)
          if (res[0].value.features.length == 0) {
            Message.info('未查询到任何信息')
            return
          }
          if (!data.plantGraphicLayer) {
            data.plantGraphicLayer = addGraphicLayer({ view })
          }
          if (!res[0]?.value?.features?.length) {
            return
          }
          highlightByGeometryList({ view, geometryList: getGeometryListByQueryResult({ res, merge: true }), zoom: true })

        } finally {
          data.loading = false
        }

      }
      const addNodeBtn = (cb) => {
        content.refs['asset-list-ref'].addNodePub(data.currentAssetId, cb)
      }
      const mapLoaded = ({ mapView, mapType }) => {
        data.mapView = mapView
      }

      const expertDetail = (id) => {
        data.rightDrawerViewType = '1'
        data.currentExpertId = id
      }

      const nodeClick = (item) => {
        console.log("item",item)
        data.listViewType = item.type
        data.listCardVisible = true
        data.currentAssetId = item.id
        if (item.type == '1') {
          //展开右侧展示库体信息
          data.rightDrawerViewType = '2'
        }
      }
      const searchAction = (searchForm) => {
        data.listCardVisible = true
        nextTick(() => {
          content.refs['shelve-list-ref'].searchAction(searchForm)
        })

      }
      return { ...toRefs(data), nodeClick, addNodeBtn, mapLoaded, searchAction, expertDetail, loadPlantDistribute, queryRegion }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .gpm-root {
    width: 100%;
    height: 100%;
    position: relative;

    .shelve-list, .right-drawer, .asset-list, .gpm-search {
      z-index: 10;
      position: absolute;

    }

    .shelve-list {
      bottom: 0;
      left: 12%;
    }

    .gpm-search {
      top: 5%;
      left: 42%;
    }

    .right-drawer {
      top: 5%;
      right: 0;
    }

    .asset-list {
      left: 0;
      top: 5%

    }
  }
</style>
